<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>

</head>
<body>

<div>
    <input type="text" id="id" placeholder="请输入编号">
    <input type="text" id="name"  placeholder="请输入姓名">
    <input type="text" id="gender"  placeholder="请输入性别">
    <input type="button" value="添加" id="btn_add">
</div>
<table>
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="java:void(0)" onclick="delTr(this)">删除</a></td>
    </tr>
    <tr>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="java:void(0)" onclick="delTr(this)">删除</a></td>
    </tr>

    <tr>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <td><a href="java:void(0)" onclick="delTr(this)">删除</a></td>
    </tr>
</table>
<script>
    document.getElementById("btn_add").onclick = function () {
//获取添加按钮对象，并给他绑定事件
        var id = document.getElementById("id").value;
//获取id的对象
        var name = document.getElementById("name").value;
//获取name对象
        var gender = document.getElementById("gender").value;
        var table = document.getElementsByTagName("table")[0];
         table.innerHTML+=" <tr>\n" +
             "        <td>"+id+"</td>\n" +
             "        <td>"+name+"</td>\n" +
             "        <td>"+gender+"</td>\n" +
             "        <td><a href=\"javascript:void(0)\" onclick=\"delTr(this)\">删除</a></td>\n" +
             "    </tr>";

    }
    function delTr(object){//
        var table=object.parentNode.parentNode.parentNode;//
        var tr=object.parentNode.parentNode;//
        table.removeChild(tr);//
    }

</script>
</body>
</html>